<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="lib/jquery-1.7.2.min.js" type="text/javascript"></script>
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .login_container {
        background: url("images/9.jpg");
        background-size: cover;
        background-attachment: fixed;
        height: 100%;
    }

    .login_box {
        width: 450px;
        height: 300px;
        background: rgba(255,255,255,0.3);
        border-radius: 5px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }


    .container {
        margin-top: 5px;
    }

    #msg {
        font-size: 14px;
        color: red;
        text-align: center;
    }

    .z-text-roll {
        /* 最大宽度 */
        width: 100%;
        /* 不允许换行 */
        white-space: nowrap;
        /* 超出隐藏 */
        overflow: hidden;
        position: relative;
        --gap: 20px;
        --time: 3s;
        margin-top: 2px;
    }
    .z-text-roll>span {
        position: relative;
        display: inline-block;
    }
    .z-text-roll>span::before {
        content: attr(data-text);
        position: relative;
        left: 0;
    }
    .z-text-roll.z-is-roll>span::before {
        --index:0;
        animation: z-text-anim var(--time) linear infinite;
    }
    .z-text-roll.z-is-roll>span::after {
        content: attr(data-text);
        position: absolute;
        left: calc(100% + var(--gap));
        --index:1;
        animation: z-text-anim var(--time) linear infinite;
    }

    @keyframes z-text-anim {
        0% {
            /* --index 为第几个文本 */
            left: calc((100% + var(--gap)) * var(--index));
        }
        100% {
            left: calc((100% + var(--gap)) * (var(--index) - 1));
        }
    }
    /* 更多 */
    .z-text-roll>span>font {
        display: none;
    }
    .z-text-roll.z-is-roll>span>font {
        display: inline-block;
        position: absolute;
        left: calc((100% + var(--gap)) * 2);
        --index:2;
        animation: z-text-anim var(--time) linear infinite;
    }
    .z-text-roll.z-is-roll>span>font>span {
        margin-right: var(--gap);
    }

    #characters{
        font-width: 200;
        font-size: 20px;
        color: #3d3434;
    }
</style>

    <script type="text/javascript">
        // validateLogin();
        function login(){
            console.log(123)
            let username = $("#username").val();
            let password = $("#password").val();
            if(username!="admin"){
                alert("非管理员用户,不可登录")
            }

            $.ajax({
                url:"/customer/login",
                data:{
                    username:username,
                    password:password
                }
            }).done(function (rs){
                console.log(rs.code)
                if(rs.code == "100"){
                    //成功
                    sessionStorage.setItem('user',JSON.stringify(rs.user))
                    window.location.href="index.html"
                }else{
                    alert("出错了，您的用户名或密码是错的")
                }

            })
        }

    </script>


</head>
<body>
<div class="login_container">
    <div class="login_box">
        <!-- css变量说明：--gap:文字段之间的间隔(默认20px)，--time:滚动一段文字的时间(默认3s) -->
        <div class="z-text-roll z-is-roll"  style="--gap: 20px;--time:5s;">
            <span id="characters" data-text="欢迎登录茶韵商城后台管理系统"></span>
        </div>


        <div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <div class="display">
                        <div id="msg" style="text-align: center;color: red;display: none">登录失败!</div>
                        <form action="#" class="form-horizontal" role="form" method="post">
                            <div class="form-group">
                                <label for="username" class="col-xs-4 control-label">用户名：</label>
                                <div class="col-xs-6">
                                    <input class="form-control" id="username" value="admin">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="password" class="col-xs-4 control-label">密码：</label>
                                <div class="col-xs-6">
                                    <input type="password" class="form-control" id="password" value="123">
                                </div>
                            </div>
                            <div></div>
                            <div class="form-actions col-xs-8 pull-right">
                                <button id="loginBtn" type="button" class="btn btn-primary"  onclick="login()">登录</button>
                                <button type="reset" class="btn btn-default" style="margin-left: 30px">取消</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>
</body>
</html>